<!--  -->
<template>
  <div>
    <el-dialog title="提示" :visible.sync="dialog" width="60%" :before-close="handleClose">
      <el-form ref="form" :model="student" label-width="80px">
        <el-card>
          <div slot="header">
            <span>基本信息</span>
          </div>
          <el-row>
            <el-col :span="8">
              <el-form-item label="姓名">
                <el-input size="small" v-model="student.name" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="性别">
                <el-select size="small" v-model="student.sex" placeholder>
                  <el-option label="男" value="0"></el-option>
                  <el-option label="女" value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="班级">
                <el-select v-model="student.classId" placeholder>
                  <el-option
                    v-for="item in classList"
                    :key="item.id"
                    :label="item.className"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="电话">
                <el-input size="small" v-model="student.tel" />
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="身份证">
                <el-input size="small" v-model="student.manID" />
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="地区">
                <el-cascader
                  size="small"
                  :options="cityOptions"
                  v-model="selectCity"
                  @change="cityChange"
                ></el-cascader>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="宿舍">
                <el-select size="small" v-model="student.dormId">
                  <el-option
                    v-for="item in dormList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-date-picker
                v-model="dormstart"
                size="mini"
                type="date"
                placeholder="入住日期"
                value-format="yyyy-MM-dd"
              />
            </el-col>

            <el-col :span="8">
              <el-date-picker
                v-model="dormend"
                size="mini"
                type="date"
                placeholder="离开日期"
                value-format="yyyy-MM-dd"
              />
            </el-col>
          </el-row>
        </el-card>

        <el-card>
          <div slot="header">
            <span>补充信息</span>
          </div>
          <el-col>
            <el-input size="small" style="margin:30px; width:200px;" v-model="student.manID" />
          </el-col>
        </el-card>
      </el-form>
      <!-- 缴费信息 -->
      <el-card>
        <div slot="header">
          <span class="text-info">缴费信息</span>
          <el-button type="text" style="margin-left:200px;" @click="openCostCard = true">+缴费</el-button>
        </div>
        <el-table :data="costList" v-if="costList.length>0" border stripe>
          <el-table-column prop="costType" label="缴费类型" width="120"></el-table-column>

          <el-table-column prop="costValue" label="费用" width="120"></el-table-column>

          <el-table-column prop="costTime" label="缴费时间" width="120"></el-table-column>

          <el-table-column prop="costBak" label="备注信息" width="120"></el-table-column>
        </el-table>
      </el-card>
      <!-- 预缴费信息 -->
      <el-card v-if="preCostList.length>0">
        <span class="text-info">预缴费信息</span>
        <el-table :data="preCostList" border stripe>
          <el-table-column prop="costType" label="缴费类型" width="120"></el-table-column>

          <el-table-column prop="costValue" label="费用" width="120"></el-table-column>

          <el-table-column prop="costTime" label="缴费时间" width="120"></el-table-column>

          <el-table-column prop="costBak" label="备注信息" width="120"></el-table-column>

          <el-table-column label="操作" width="220">
            <template slot-scope="scope">
              <el-button type="primary" @click="doDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <el-card v-if="openCostCard">
        <el-form :model="costForm" ref="costForm" label-width="80px">
          <el-form-item label="费用类型">
            <el-radio-group v-model="costForm.costType">
              <el-radio label="0">学费</el-radio>
              <el-radio label="1">住宿费</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="费用">
            <el-input-number v-model="costForm.costValue" :min="1" label></el-input-number>
          </el-form-item>
          <el-form-item label="缴费时间">
            <el-date-picker
              value-format="yyyy-MM-dd"
              v-model="costForm.costTime"
              type="date"
              placeholder="选择日期时间"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="备注信息">
            <el-input type="textarea" v-model="costForm.costBak"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="doAddCost">立即创建</el-button>
            <el-button @click="openCostCard = false">取消</el-button>
          </el-form-item>
        </el-form>
      </el-card>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog = false">取 消</el-button>
        <el-button type="primary" @click="doSave">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { classList } from "@/api/xy/clazz";
import { regionDataPlus, CodeToText } from "element-china-area-data";
var _ = require("lodash");
import {
  studentList,
  //   studentDetail,
  studentSave,
  studentCostList,
  studentUpdate,
  dormList,
  dele,
  studentDetail,
} from "@/api/xy/student";
export default {
  name: "StudentDetail",
  data() {
    return {
      openCostCard: false,
      student: {},
      dialog: false, // 弹窗 默认关闭
      cityOptions: regionDataPlus,
      selectCity: [],
      classList: [],
      dormList: [],
      preCostList: [],
      page: {
        start: 1,
        limit: 10,
        totalCount: 0,
        sizes: [10, 20, 30], // 注意: element 的sizes必须是limit的整倍数
      },
      costList: [],
      dormLists: [],
      dormstart: "",
      dormend: "",
      costForm: {
        costType: "0",
      },
    };
  },
  computed: {},
  created() {
    this.getClassList();
    this.getDormList();
  },
  mounted() {},
  methods: {
    handleClose() {
      this.dialog = false;
      this.student = {};
    },
    cityChange() {},
    // openCostCard() {},
    getDormList() {
      dormList().then((res) => {
        this.dormList = res.data.list;
      });
    },
    getClassList() {
      classList({
        start: this.page.start,
        limit: this.page.limit,
      }).then((res) => {
        this.classList = res.data.list;
        console.log(res);
      });
    },
    doDelete(row) {
      this.preCostList = this.preCostList.filter(
        (item) => item.tempId != row.tempId
      );
    },
    openDialog() {
      this.dialog = true;
    },
    openDialogDetail(id) {
      this.openDialog();
      studentDetail({ id }).then((res) => {
        // res.data.id = id;
        
        this.student = res.data;
        console.log(this.student)
            // console.log(this.student.id);
      console.log(111);
        this.selectCity = this.student.city.split(",");
        console.log(this.selectCity)
      });
      studentCostList({ userId: id, start: 1, limit: 99 }).then((res) => {
        this.costList = res.data.list;
      });
    },
    doAddCost() {
      var costObj = _.cloneDeep(this.costForm);
      costObj.tempId = new Date().getTime();
      this.preCostList.push(costObj);
      this.costForm = this.$options.data().costForm;
    },
    doSave() {
      var cityText = this.selectCity.map((ele) => CodeToText[ele]);
      this.cityText = cityText;
      console.log(cityText)
      var student = {
        name: this.student.name,
        sex: this.student.sex,
        manID: this.student.manID,
        tel: this.student.tel,
        city: this.selectCity.toString(),
        cityText: this.cityText.toString(), 
        classId: this.student.classId,
        dormId: this.student.dormId,
        dormStartTime: this.dormstart,
        dormEndTime: this.dormend,
        tel2: "234234",
      };

      var api = null;
      //根据student是否有id来判断当前操作是更新还是新增
      if (this.student.id) {
        student.id = this.student.id;
        api = studentUpdate;
      } else {
        api = studentSave;
      }
      var submitObj = {
        xyUser: {
          ...student,
        },
      };
      submitObj._size = this.preCostList.length;
      for (var i = 0; i < this.preCostList.length; i++) {
        submitObj["xyCostItems_" + i] = this.preCostList[i];
      }
      api(
        submitObj
      ).then((res) => {
        // 如果返回的结果成功了 , 1. 调用handleClose关闭窗口
        // 2. 调用getStudentList() 刷新列表
        if (res.code == "success") {
          this.$message.success("保存成功!");
          this.handleClose();
          this.$emit("refresh-list");
          
          // this.getStudentList();
        } else {
          this.$message.error("保存失败!");
        }
        console.log(res);
      });
    },
  },
};
</script>

<style lang='scss' scoped >
</style>
